<template>
  <div>
    <el-button type="primary" @click="openDialog">客户修改</el-button>

    <el-dialog :visible.sync="dialogVisible" title="修改客户" width="50%">
      <el-form :model="form" ref="form">
        <el-form-item label="客户名称" :rules="{ required: true, message: '请输入客户名称' }">
          <el-input v-model="searchName" @blur="onNameChange"></el-input>
        </el-form-item>
        <el-table :data="customerList" v-if="showCustomerList" @row-click="onRowClick">
          <el-table-column prop="name" label="客户名称"></el-table-column>
        </el-table>
        <div v-if="showCustomerDetail">
          <el-form-item label="客户名称" prop="name">
            <el-input v-model="form.name" @blur="checkCustomer"></el-input>
          </el-form-item>
          <el-form-item label="客户地址" prop="address">
            <el-input v-model="form.address"></el-input>
          </el-form-item>
          <el-form-item label="客户归属地" prop="region">
            <el-input v-model="form.region"></el-input>
          </el-form-item>
          <el-form-item label="客户联系人" prop="contactPerson">
            <el-input v-model="form.contact_person"></el-input>
          </el-form-item>
          <el-form-item label="客户电话" prop="phone">
            <el-input v-model="form.phone1"></el-input>
          </el-form-item>
          <el-form-item label="客户经理">
            <el-input v-model="form.manager"></el-input>
          </el-form-item>
          <el-form-item label="客户经理电话" prop="manager_phone">
            <el-input v-model="form.manager_phone"></el-input>
          </el-form-item>
        </div>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="onSubmit" v-if="showCustomerDetail">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      dialogVisible: false,
      searchName: '',
      form: {
        name: '',
        address: '',
        contact_person: '',
        phone1: '',
        region: '',
        operator: 'operator1',
        manager: '',
        manager_phone: '',
        business_mgr: '',
        status: ''
      },
      customerList: [

      ],
      showCustomerList: false,
      showCustomerDetail: false
    };
  },
  methods: {
    openDialog() {
      this.dialogVisible = true;
      this.resetForm();
    },
    async onNameChange() {
      if (this.searchName) {
        try {
          const response = await axios.post('/api/customer/searchAll', this.searchName, {
            headers: {
              'Content-Type': 'text/plain'
            }
          });
          this.customerList = response.data.data;
          //console.log(response.data.data)
          this.showCustomerList = true;
          this.showCustomerDetail = false;
        } catch (error) {
          this.$message.error('查询客户失败');
        }
      } else {
        this.showCustomerList = false;
        this.showCustomerDetail = false;
      }
    },
    onRowClick(row) {
      this.form = { ...row };
      this.showCustomerDetail = true;
      this.showCustomerList = false;
    },
    async onSubmit() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          try {
            await axios.post('/api/customer/update', this.form);
            this.$message.success('客户保存成功');
            this.dialogVisible = false;
            this.resetForm();
          } catch (error) {
            this.$message.error('保存客户信息失败');
          }
        } else {
          this.$message.error('请填写所有必填项');
        }
      });
    },
    resetForm() {
      this.searchName = '';
      this.form = {
        name: '',
        address: '',
        contact: '',
        phone: ''
      };
      this.customerList = [];
      this.showCustomerList = false;
      this.showCustomerDetail = false;
    }
  }
};
</script>
